var goods = document.querySelector('.goods_list'),
    goods_Arrz = [];
var tbody = document.querySelector('tbody'),
    carts_Arrz = [];


var total = document.querySelector('#total');
var selectedCounts = document.querySelector('#selectedCounts');
var totalCounts = document.querySelector('#totalCounts');

window.onload = function() {
    goods_Arrz = (localStorage.dataGood) ? JSON.parse(localStorage.dataGood) : [];
    display_goods(goods_Arrz);
    carts_Arrz = (localStorage.dataCart) ? JSON.parse(localStorage.dataCart) : [];
    display_carts(carts_Arrz);
};


function display_goods(arrz) {
    var strz = '';
    for (var i = 0; i < arrz.length; i++) {
        strz += `<dl>
                    <dt>
                        <img src="${arrz[i].image}" alt="">
                    </dt>
                    <dd>
                        <span>${arrz[i].name}</span>
                        <br>
                        <span>￥${arrz[i].price}</span>
                        <button onclick="add_products(${arrz[i].productid})" type="button">加入购物车</button>
                    </dd>
                </dl>`;
    }
    goods.innerHTML = strz;
}

function add_products(id) {
    var flag = carts_Arrz.some(function(item, index) {
        return item.id == id;
    });

    if (flag) {
        for (var i = 0; i < carts_Arrz.length; i++) {
            if (carts_Arrz[i].id == id) {
                carts_Arrz[i].count++;
                carts_Arrz[i].sum = (carts_Arrz[i].price * carts_Arrz[i].count).toFixed(2);
            } else {
                continue;
            }
        }
    } else {
        for (var i = 0; i < goods_Arrz.length; i++) {
            if (id == goods_Arrz[i].productid) {

                var goodItem = {
                    id: id,
                    path: goods_Arrz[i].image,
                    name: goods_Arrz[i].name,
                    price: goods_Arrz[i].price,
                    count: 1,
                    sum: goods_Arrz[i].price,
                    parchaseTime: new Date().toLocaleTimeString()
                }

                carts_Arrz.push(goodItem);

            } else {
                continue;
            }
        }
    }

    localStorage.dataCart = JSON.stringify(carts_Arrz);
    display_carts(carts_Arrz);
};

function display_carts(arrx) {
    var strx = '',
        total_num = 0,
        counts_num = 0,
        selected_num = 0;
    for (var i = 0; i < arrx.length; i++) {
        strx += `<tr>
                    <td>
                        <input class="singleSelect" data-id="${arrx[i].id}" type="checkbox">
                    </td>
                    <td>
                        <img src="${arrx[i].path}" alt="">
                        <span>${arrx[i].name}</span>
                    </td>
                    <td>
                        <div>
                            <button onclick="add(${arrx[i].id})" type="button">+</button>
                            <span>${arrx[i].count}</span>
                            <button onclick="minus(${arrx[i].id})" type="button">-</button>
                        </div>
                    </td>
                    <td>
                        ${arrx[i].price}元
                    </td>
                    <td>
                        ${arrx[i].sum}元
                    </td>
                    <td>
                        <button onclick="del(${arrx[i].id})" type="button">删除</button>
                    </td>
                    <td>
                        ${arrx[i].parchaseTime}
                    </td>
                </tr>`;
        total_num += arrx[i].sum / 1;
        counts_num += arrx[i].count / 1;
    }
    tbody.innerHTML = strx;
    total.innerHTML = total_num.toFixed(2);
    totalCounts.innerHTML = counts_num;
};

function add(id) {
    for (var i = 0; i < carts_Arrz.length; i++) {
        if (id == carts_Arrz[i].id) {
            carts_Arrz[i].count++;
            carts_Arrz[i].sum = (carts_Arrz[i].price * carts_Arrz[i].count).toFixed(2);
        } else {
            continue;
        }
    }
    localStorage.dataCart = JSON.stringify(carts_Arrz);
    display_carts(carts_Arrz);
}

function minus(id) {
    for (var i = 0; i < carts_Arrz.length; i++) {
        if (id == carts_Arrz[i].id && carts_Arrz[i].count > 1) {
            carts_Arrz[i].count--;
            carts_Arrz[i].sum = (carts_Arrz[i].price * carts_Arrz[i].count).toFixed(2);
        } else {
            continue;
        }
    }
    localStorage.dataCart = JSON.stringify(carts_Arrz);
    display_carts(carts_Arrz);
}

function del(id) {
    for (var i = 0; i < carts_Arrz.length; i++) {
        if (id == carts_Arrz[i].id) {
            carts_Arrz.splice(i, 1);
        } else {
            continue;
        }
    }
    localStorage.dataCart = JSON.stringify(carts_Arrz);
    display_carts(carts_Arrz);
}


var selectAll = document.querySelector('tfoot input');
var selectSingles = document.getElementsByClassName('singleSelect');


selectAll.onclick = function() {
    for (var i = 0; i < selectSingles.length; i++) {
        selectSingles[i].checked = this.checked;
    }
};

for (var i = 0; i < selectSingles.length; i++) {
    selectSingles[i].onclick = function() {

        var point_flag = true;
        for (var j = 0; j < selectSingles.length; j++) {
            if (!(selectSingles[j].checked)) {
                point_flag = false;
                break;
            } else {
                continue;
            }
        }
        selectAll.checked = point_flag;
    };
}

function clearSelected() {
    var arr_ID = [];
    for (var i = 0; i < selectSingles.length; i++) {
        if (selectSingles[i].checked) {
            arr_ID.push(selectSingles[i].getAttribute('data-id'));
        } else {
            continue;
        }
    }
    for (var i = 0; i < arr_ID.length; i++) {
        del(arr_ID[i]);
    }
}